<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="mine-page">
    <!-- 头部区域 -->
    <header class="mine-header">
      <div class="header-bg">
        <van-image 
          width="100%"
          height="25vh"
          position="top"
          src="https://img0.baidu.com/it/u=4049425788,3023392160&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
      </div>
      
      <!-- 用户信息区域 -->
      <div class="user-info">
        <div class="avatar-section">
          <van-image
            round
            width="80px"
            height="80px"
            fit="cover"
            position="center"
            src="https://img2.baidu.com/it/u=350449573,3614236444&fm=253&fmt=auto?w=596&h=954"
            class="user-avatar"
          />
          <div class="user-details">
            <h2 class="username">用户昵称</h2>
            <p class="user-level">普通会员</p>
          </div>
        </div>
        
        <!-- 用户数据统计 -->
        <div class="user-stats">
          <div class="stat-item" @click="handleClickStat('pending')">
            <span class="stat-value">{{orderStore.pendingPaymentListCount}}</span>
            <span class="stat-label">待支付</span>
          </div>
          <div class="stat-item" @click="handleClickStat('all')">
            <span class="stat-value">{{orderStore.allOrderListCount}}</span>
            <span class="stat-label">待收货</span>
          </div>
          <div class="stat-item" @click="handleClickStat('finished')">
            <span class="stat-value">{{orderStore.finishedOrderListCount}}</span>
            <span class="stat-label">已完成</span>
          </div>
        </div>
      </div>
    </header>

    <!-- 功能菜单区域 -->
    <main class="mine-main">
      <van-cell-group inset>
        <van-cell title="我的订单" value="查看全部" is-link to="/order" />
        <van-cell title="我的地址" value="管理地址" is-link to="/locationList" />
        <van-cell title="我的收藏" value="查看收藏" is-link />
        <van-cell title="设置" value="账号设置" is-link />
        <van-cell title="客服中心" value="联系客服" is-link />
        <van-cell title="退出登录" value="退出登录" is-link class="logout-cell" @click="handleLogout"/>
      </van-cell-group>
    </main>
  </div>
</template>

<script setup>
import { useUserStore } from '../../store/user';
import { useOrderStore } from '../../store/order';
const orderStore = useOrderStore();
const userStore = useUserStore();
import router from '../../router';
import { showSuccessToast,showFailToast, showConfirmDialog  } from 'vant';
defineOptions({
  name: 'MineIndex'
})
// 通过添加跳转指定的的query参数 然后和order页的active结合使用 实现点击统计项跳转指定订单状态
const handleClickStat = (type) => {
  switch (type) {
    case 'pending':
      router.push({ name: 'Order', query: { tab: 'pending' } })
      break
    case 'all':
      router.push({ name: 'Order', query: { tab: 'all' } })
      break
    case 'finished':
      router.push({ name: 'Order', query: { tab: 'paid' } })
      break
    default:
      break
  }
}
const handleLogout = () => {
  showConfirmDialog({
  title: '退出登录',
  message:
    '确定要退出登录吗？ 请再确认一遍哦',
})
  .then(async () => {
    try { 
      await userStore.LogoutPinia()
      // 使用replace替换当前历史记录，并强制刷新页面确保布局正确切换
      router.replace('/login')
      showSuccessToast('退出成功')
      // 强制刷新页面，确保布局正确切换
      setTimeout(() => {
        window.location.reload()
      }, 1000)
    }catch (error) { 
      showFailToast(error.message||'退出失败')
    }
  })
  .catch(() => {
    // on cancel
    showFailToast('取消退出')
  });

}
</script>

<style scoped lang="scss">
.mine-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 50px; // 为底部导航留出空间
  
  .mine-header {
    position: relative;
    
    .header-bg {
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 30px;
        background: linear-gradient(to bottom, transparent, #f5f5f5);
      }
    }
    
    .user-info {
      position: relative;
      margin-top: -60px;
      padding: 20px 16px;
      background: white;
      border-radius: 16px 16px 0 0;
      
      .avatar-section {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        
        .user-avatar {
          margin-right: 16px;
          border: 3px solid white;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .user-details {
          flex: 1;
          
          .username {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
          }
          
          .user-level {
            font-size: 14px;
            color: #666;
          }
        }
      }
      
      .user-stats {
        display: flex;
        justify-content: space-around;
        padding: 16px 0;
        border-top: 1px solid #f0f0f0;
        
        .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          
          .stat-value {
            font-size: 20px;
            font-weight: 600;
            color: #666;
            margin-bottom: 4px;
          }
          
          .stat-label {
            font-size: 12px;
            color:#ff7744;
          }
        }
      }
    }
  }
  
  .mine-main {
    margin-top: 12px;
    
    :deep(.van-cell-group) {
      border-radius: 8px;
      overflow: hidden;
    }
    
    :deep(.van-cell) {
      padding: 16px;
      
      &:not(:last-child)::after {
        left: 16px;
        right: 16px;
      }
    }
  }
  
  .mine-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    
    :deep(.van-tabbar-item) {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .van-tabbar-item__icon {
        margin-bottom: 4px;
      }
      
      .van-tabbar-item__text {
        font-size: 12px;
      }
    }
  }
}
.logout-cell {
  :deep(.van-cell__title) {
    color: #ff4444;
  }
  :deep(.van-cell__value) {
    color: #ff4444;
  }
  :deep(.van-cell__right-icon) {
    color: #ff4444;
  }
}
</style>